<template>
  <div class="login-container">
    <el-card class="login-form">
      <img
        src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
        class="login-logo"
        alt=""
      />
      <el-form :model="loginForm" status-icon :rules="rules" ref="user">
        <el-form-item prop="loginName">
          <el-input prefix-icon="el-icon-mobile-phone" v-model="loginForm.loginName" autocomplete="off" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
            prefix-icon="el-icon-lock"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row>
            <el-col :span="17">
              <el-input prefix-icon="el-icon-picture-outline" v-model="loginForm.code" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="7">
              <img :src="codeImg" alt="" class="code-image" @click="getcodeImage">
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { login, getImageCode } from '@/api/user'
import { Message } from 'element-ui'
export default {
  name: 'login-page',
  // async created () {
  //   const char = this.getClientToken()
  //   console.log(char)
  //   this.codeImage = char
  // },
  data () {
    return {
      codeImage: '',
      codeImg: '',
      loginForm: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        clientToken: '',
        loginType: 0
      },
      rules: {
        loginName: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 5, max: 18, message: '限制输入6-18位账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 18, message: '限制输入6-18位账号', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
          // { pattern: /\^d{4}$/, message: '请输入有效验证码', trigger: 'blur' }
        ]
      }

    }
  },
  created () {
    this.getImgCode()
  },
  methods: {
    getClientToken () {
      let str = ''
      for (let i = 0; i < 32; i++) {
        const random = Math.floor(Math.random() * 74)
        const num = random + 48
        if ((num >= 58 & num <= 64) || (num >= 91 & num <= 96)) {
          i--
        } else {
          const char = String.fromCharCode(random + 48)
          str += char
        }
      }
      return str
    },
    getNanoid () {
      const res = this.getClientToken()
      // console.log(res)
      this.loginForm.clientToken = res
    },
    async getImgCode () {
      try {
        this.getNanoid()
        const res = await getImageCode(this.loginForm.clientToken)
        const url = window.URL.createObjectURL(res.data)
        this.codeImg = url
      } catch (error) {
        console.log(error)
      }
    },
    async submitForm () {
      await this.$refs.user.validate()
      const res = await login({ ...this.loginForm })
      // console.log(res)
      if (res.data.success) {
        this.$store.commit('user/updataToken', res.data.token)
        this.$store.commit('user/username1', res.data)
        this.$message({
          message: '登入成功',
          type: 'success'
        })
        this.$router.push('/')
      } else {
        Message.error(res.data.msg)
        this.getcodeImage()
        this.loginForm.code = ''
      }

      // await this.$store.dispatch('user/login', {
      //   ...this.loginForm
      // })

      // const res = await login(this.loginForm)
      // console.log(res)
    },

    getcodeImage () {
      // console.log('1')
      this.getImgCode()
    }
  }
}
</script>

<style lang="less" scoped>
body {
  margin: 0;
}
.login-container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-image: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png);
  background-repeat: no-repeat;
  background-size: cover;
  .login-form {
    position: absolute;
    width: 446px;
    height: 310px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 20px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    border-radius: 10px;
    overflow: visible;
    .el-form-item__content {
      line-height: 50px;
      position: relative;
      font-size: 14px;
      .el-input__inner{
        height: 50px;
      }
    }
  }
  .login-logo {
    position: absolute;
    width: 96px;
    height: 96px;
    top: -46px;
    left: 50%;
    margin-left: -48px;
    z-index: 10;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span:first-of-type {
      margin-right: 16px;
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      color: #999;
      margin: 0 auto 40px auto;
      text-align: center;
      font-weight: 700;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .code-image {
    display: block;
  }

  .login-btn {
    width: 100%;
    height: 52px;
    background: linear-gradient(262deg, #2e50e1, #6878f0);
    opacity: 0.91;
    border-radius: 8px;
    color: #fff;
    text-shadow: 0 7px 22px #cfcfcf;
  }
}
</style>
